<template>
	<view>
		<tt-bar leftIcon="icon-back" title="手机号码修改"></tt-bar>
		<view class="setList">
			<view class="row tapBg" >
				<text class="setLabel">当前手机号</text>
				<text class="rightText">{{userInfo.username}}</text>
			</view>
			<view class="row telForm">
				<view class="formRow">
					<text class="fromLabel">手机号</text>
					<input type="number" placeholder="请输入新的手机号" v-model="tel" maxlength="11" />
					<button :class="[isSendMsg?'isSend':'']" v-text="sendText" @tap="getMsgCode">获取验证码</button>
				</view>
				<view class="formRow">
					<text class="fromLabel">验证码</text>
					<input type="number" placeholder="请输入验证码" v-model="msgCode" maxlength="6" />
				</view>
			</view>
		</view>
		<view class="btnBox">
			<button class="tapOpt" @tap="save">保存</button>
		</view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			ttBar
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		data() {
			return {
				tel: '',
				msgCode: '',
				isGetMsg: false,
				sendText: '获取验证码',
				isSendMsg: false,
			};
		},
		methods:{
			// 获取短信验证码
			getMsgCode() {
				if (!this.isSendMsg) {
					let rgx = /^1[3456789]\d{9}$/;
					if (!this.tel) {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (!rgx.test(this.tel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					} else {
						
						this.$store.dispatch("apiSendMsgCode",{
							phone:this.tel,
							type:'5'
						}).then(res=>{
							let t = 60;
							this.sendText = t + "秒"
							this.isSendMsg = true;
							const itval = setInterval(() => {
								t--;
								if (t < 1) {
									t = 60;
									this.sendText = "获取验证码"
									this.isSendMsg = false;
									clearInterval(itval);
								} else {
									this.isSendMsg = true;
									this.sendText = t + "秒"
								}
							}, 1000)
						})
					}
				} else {
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}
			
			},
			save(){
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if(!this.msgCode){
					uni.showToast({
						title: '短信验证码不能为空',
						icon: 'none'
					});
				}else{
					this.$store.dispatch("apiEditTel",{
						userId:this.userInfo.userId,
						phone:this.tel,
						code:this.msgCode
					}).then(res=>{
						this.userInfo.username=this.tel
					})
				}
				
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				
				uni.stopPullDownRefresh();
			}, 1500)
		}
		
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.setList {
		margin-top: 26upx;
		padding: 0 18upx;
		display: flex;
		flex-direction: column;

		.row {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 50upx 40upx 50upx 50upx;
			border-radius: 16upx;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			margin-bottom: 10upx;

			.setLabel {
				font-size: 28rpx;
				color: #202932;
				flex: 1;
			}

			.iconfont {
				color: #908bad;
			}

			.listRight {
				font-size: 28rpx;
				color: #ff7d27;
			}

			.listRight2 {
				font-size: 28upx;
				color: #202932;
			}
		}
	}
	.telForm{
		padding: 10upx 40upx 10upx 50upx!important;
		display: flex;
		flex-direction: column;
		.formRow{
			width: 100%;
			display: flex;
			align-items: baseline;
			border-bottom: 1px solid #e7e7e7;
			padding: 40upx 0;
			.fromLabel{
				font-size: 28rpx;
					color: #202932;
					flex-shrink: 0;
					margin-right: 30upx;
					
			}
			input{
				flex: 1;
				font-size: 28upx;
			}
			button{
				font-size: 28upx;
				border: none;
				padding: 0;
				margin: 0;
				background-color: rgba(0,0,0,0);
				color: #ffa524;
				flex-shrink: 0;
				line-height: 28upx;
			}
			button:after{
				border: none;
				outline: none;
			}
			.disabled{
				color: #CCCCCC;
			}
			.isSend {
				color: #9c9c9c;
			
			}
		}
		.formRow:last-child{
			border: none;
		}
	}

	.btnBox {
		position: absolute;
		bottom: 50upx;
		width: 100%;
		left: 0;
		padding: 0 98upx;

		button {
			height: 88rpx;
			background-color: #ffb423;
			border-radius: 44rpx;
			border-radius: 44upx;
			border: none;
			line-height: 88upx;
			color: #FFFFFF;
			font-size: 32upx;
		}

		button:after {
			border: none;
		}
	}
</style>
